Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix rendering issue with globe view at high zoom #1831

Closed
wants to merge 3 commits into from

Conversation

SnailBones
Copy link
Contributor

@SnailBones SnailBones commented Apr 15, 2022

Fixes mapbox/mapbox-gl-js#11750

In the upcoming globe projection in mapbox-gl-js, the projection automatically transitions to Mercator at high zoom levels. When used with react-map-gl, this created an inconsistent state where between Mapbox._renderTransform.projection would be correctly set to Mercator but Mapbox._map.transform.projection would be reset to globe at every update, creating strange rendering artifacts.

This PR provides a fix by preserving projection from the previous state of the transform.

Before:

Screen.Recording.2022-04-18.at.4.18.54.PM.copy.mov

After:

Screen.Recording.2022-04-15.at.5.05.34.PM.copy.mov

map.transform = tr;
map.transform.projection = savedProjection;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the auto switching of projection happens in map._render:

https://github.com/mapbox/mapbox-gl-js/blob/9fff53107b78bdaae875693b7b34c7f9acb5a1ae/src/ui/map.js#L2950

Would it make more sense for us to match the two transforms in

this._map.transform = tr;

tr.projection = this._map.transform.projection?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that initially, and while it fixes the rendering issue, it introduces a bug where the map position jumps on zooming out past the Mercator/Globe threshold.

Screen.Recording.2022-04-26.at.4.16.07.PM.mov

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have seen the same issue in matching elevation between the two transforms. In addition to assigning

tr.projection = this._renderTransform.projection

You may also need to call _calcMatrices() on the transform.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, I'll give that a try!

@SnailBones
Copy link
Contributor Author

@Pessimistress Just wanted to check in on the status of this PR! Do you have any other concerns that I can address?

It would be great to have this fixed before the mapbox-gl-js globe release coming later this month.

@Pessimistress
Copy link
Collaborator

Can you provide steps I can follow to test this feature?

@SnailBones
Copy link
Contributor Author

@Pessimistress Thank you for the quick response! You can install the globe alpha with npm i mapbox/mapbox-gl-js#globe-alpha -s

I've also been able to test the development version of mapbox-gl-js as follows:

  • Install and build the latest version of mapbox-gl-js. (Docs here)
  • Use npm link to link the test application's node_modules/mapbox-gl to your local version of the mapbox-gl-js repository.
  • Then in my test application:
import mapboxgl from '!mapbox-gl';
...
    <Map
        mapLib={mapboxgl}
        projection="globe"
        ...
    >
    </Map>

Hope that helps!

@SnailBones
Copy link
Contributor Author

SnailBones commented May 12, 2022

Testing this again, it seems this has since been fixed by #1841! Many thanks @Pessimistress! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React-map-gl with globe creates artifacts at high zoom
2 participants